<template>
	<view class="content">
		<!-- <view style="padding: 10rpx 40rpx 20rpx 40rpx;background-color: #FFFFFF;">
			<u-search placeholder="请输入搜索内容" v-model="keyword" @clear="removeSearch" @custom="getSearch()"></u-search>
		</view> -->
		
		<!-- 搜索框 -->
		<view class="search-box-title">
			<view class="inputp">
				<view class="inputs">
					<uni-icons type="search" size="20" style="margin-left: 20rpx;"></uni-icons>
					<input  type="text" v-model="keyword" placeholder="输入关键字搜索" ref='searchinput' class='scaninput'
					  @search="getSearch()" @input="inputChange" @confirm="getSearch"><!-- 输入框 :placeholder：未输入时显示内容，
					v-model：绑定字段，maxlength：设置输入长度，@input：输入框内容有变化时触发事件 @confirm：能让手机输入框的确认变成搜索-->
					<uni-icons type="close" size="20" color="#a7a7a7" style="padding-right: 20rpx;" v-if="isDelShow" @click="removeSearch"></uni-icons>
					<view class="scan_weizhi">
						<view class="scan_btn" @tap="getSearch()">搜索</view><!-- 执行搜索事件 -->
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 新版块 -->
		<view class="search-lg-box">
			<!-- 左边板块 -->
			<scroll-view scroll-y class="left-aside" v-if="dataGo">
				<view v-for="(item,index) in cateList" :key="index" class="f-item b-b"
					:class="{active: index === currentId}" @click="tabtap(item,index)">
					{{item.name}}
				</view>
			</scroll-view>
			<!-- 右侧是商品显示板块 -->
			<view class="search-right-body">
				<view class="" v-if="dataGo">
					<u-tabs :active-color="'#4CA775'" :list="tablist" :is-scroll="false" :current="current" @change="change">
					</u-tabs>
				</view>
				<view class="commodity-list-box">
					<u-empty v-if="dataNull" text="数据为空" mode="list"></u-empty>
					<view :style="dataGo == true?'':'margin-left:50rpx;'" class="commodity-body-card" v-for="(item,ids) in list" :key="ids">
						<image :src="item.skuImg" mode="aspectFill" class="shop-images-box" @click="goShopInfoPage(item)"></image>
						<view class="right-body-box">
							<view class="title-number-box" @click="goShopInfoPage(item)">
								<view class="shop-info-title">{{ item.skuTitle }}</view>
								<!-- <view v-if="dataGo" class="sales-volume"> 销量：{{ item.saleCount }} </view> -->
							</view>
							<view v-if="false" class="shop-body-info-text">{{ item.skuSubtitle == null?'暂无描述':item.skuSubtitle }}</view>							
							<view class="money-nember-box">
								<view style="display: flex; flex-direction: row;">
									<view class="price-box-red">￥{{ item.skuPrice.toFixed(2) }}</view>
									<view style=" margin-left: 10rpx; text-decoration:line-through; font-size: 24rpx; line-height: 34rpx; margin-top: 20rpx; color: darkgray;">
										￥{{item.linePrice}}
									</view>
								</view>
								<!-- <wm-numberBox v-if="hasLogin == true && item.skuType == 1 && item.inventory != 0 && item.quantity != null && item.quantity != 0" :ID="ids" :min="0" :max="item.inventory" model="2" :value="item.quantity == null?0:item.quantity" @change="bindChange($event,item)" style="margin-right: 10rpx; color: #000000;"></wm-numberBox>
								<u-icon v-if="hasLogin == false || item.skuType == 1 && item.inventory != 0 && (item.quantity == null || item.quantity == 0)" color="#4CA775"  size="50" name="plus-circle-fill" style="margin-left: auto; margin-right: 30rpx;" @click="addNumber(item)"></u-icon> -->
								<image src="../../../static/tabbar/shop_cart_2.png" v-if="hasLogin == false || item.skuType == 1 && item.inventory != 0 && (item.quantity == null || item.quantity == 0)"
									style="width: 36rpx; height: 34rpx; margin-left: auto; margin-right: 30rpx;" @click="addNumber(item)"></image>
								<view v-if="item.inventory == 0 && hasLogin == true" style="color: gray; font-size: 24rpx; margin-right: 10rpx;">
									库存不足
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 悬浮购物车 -->
		<view v-if="hasLogin"  class="suspension-box" :style="'width: ' + autoWidth" @click="goCartPage">
			<view class="cart-icon">
				<view class="number-red-box" v-if="cartData.number != 0">
					{{cartData.number}}
				</view>
				<image src="../../../static/tabbar/shop_cart_2.png" mode="aspectFit" style="width: 100%; height: 100%;"></image>
			</view>
			<view class="cart-number-text" v-if="cartData.number != 0">
				￥<span style="font-weight: bold; font-size: 32rpx;">{{cartData.money}}</span>
			</view>
		</view>
	</view>

</template>

<script>
	import wmNumberBox from "@/components/wm-numberBox/wm-number-box.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			wmNumberBox
		},
		data() {
			return {
				// 是否显示空数据
				dataNull: false,
				// 该分类下所有子菜单
				catalogIdList: '',
				// 是否显示清空icon
				isDelShow: false,
				// 是否全部是商品
				isService: false,
				// 购物车数据
				cartData: {
					number: 0,
					money: 0
				},
				// 动态宽度
				autoWidth: '90rpx',
				cateList: [{id:0,name:'全部'}],
				classId: '',
				finished: false,
				dataGo: true,
				currentId: 0,
				flowList: [],
				keyword: "",
				catalogId: "",
				// 专题使用
				hotWordLables: "",
				brandId: "",
				tablist: [{
					name: '综合'
				}, {
					name: '销量'
				}, {
					name: '价格'
				}],
				current: 0,
				list: [],
				nextData: {}
			}
		},
		onLoad(e) {
			const that = this
			const eventChannel = this.getOpenerEventChannel();
			
			eventChannel.on('item', function(data){
				if(data) {
					this.dataGo = true
					that.nextData = data
					// 获取该分类所有子节点
					that.$api.request.getChildNodeAll({
						catalogId: data.id
					}, res => {
						
						if(res.code == 200){
							that.catalogIdList = res.data.join(',')
						}
					})
					// 获取左边节点树

					const homeClickedCategory = uni.getStorageSync('homeClickedCategory');

					const lastCategory = homeClickedCategory.children.filter(v=>{
						return v.id == data.id;
					})
					let children = lastCategory[0].children;
					children.sort(function(a,b){
						if(a.sort>b.sort){
							return 1;
						}else{
							return -1;
						}
					})
					children.unshift({id:0,name:'全部'})
					that.cateList = children;
					
					that.tabtap({id:0,name:'全部'},0);
					// that.$api.request.getClassIdBySkuInfo({
					// 	classId: data.id,
					// 	sqType: 0,
					// 	sortValue: 0,
					// 	wechatId: uni.getStorageSync('openId')
					// }, res => {
						
					// 	if(res.code == 200){
					// 		that.list = res.data
					// 		that.dataNull = res.data.length > 0?false:true
					// 	}
					// })
				}
			})
			if (e.f == 2) {
				this.catalogId = e.catalogId
				this.getSearch()
				this.dataGo = false
			}
			if (e.hotWordLables != null) {
				this.hotWordLables = e.hotWordLables;
				this.getSearch();
				this.dataGo = false
			}
			this.getCartNumAndMoney()
		},
		onReachBottom() {

		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			// 刷新数据
			refreshData(){
				this.$api.request.getClassIdBySkuInfo({
					classId: this.nextData.id,
					sqType: 0,
					sortValue: 0,
					wechatId: uni.getStorageSync('openId')
				}, res => {
					if(res.code == 200){
						this.list = res.data
						this.dataNull = res.data.length > 0?false:true
					}
				})
			},
			inputChange(){
				//判断输入框是否有值输入，决定是否出现删除符号
				if (this.keyword.length>0) {
					console.log(this.keyword.length)
					this.isDelShow = true;
					console.log("大过零")
				}else{
					this.isDelShow = false;
					console.log("不大于零")
				}
			},
			// 点击加入购物车
			bindChange(e,item) {
				const that = this
				console.log(e);
				console.log(item);
				this.$api.request.getSkuInfoIsNull({
					skuId: item.skuId
				},res => {
					if(res.code == 200){
						// 如果该商品不存在
						if(res.data == false){
							that.$api.request.addShopCart({
								quantity: e.value,
								shopId: item.shopId,
								productSpuId: item.spuId,
								productSkuId: item.skuId,
								price: item.price,
								productPic: item.skuDefaultImg,
								productName: item.skuName,
								productSubTitle: item.skuSubtitle,
								productCategoryId: item.catalogId,
								productBrand: item.brandName
							}, res => {
								// this.$u.toast("添加成功");
								// 刷新购物车数量和总金额
								that.getCartNumAndMoney()
							})
						}else {
							if(e.value == 0){
								that.$api.request.removeCartShop({
									cartId: res.data.id,
								},res => {
									console.log(res);
									that.refreshData()
									that.getCartNumAndMoney()
								})
							}else {
								that.$api.request.setShopSize({
									id: res.data.id,
									num: e.value,
								}, res => {
									if(res.code == 200){
										console.log(res);
										that.getCartNumAndMoney()
									}
									
								})
							}
						}
					}
				})
			},
			
			/* 从零添加数据 */
			addNumber(item){
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/sys/common/login'
					})
				}else {
					const that = this
					console.log(item);
					this.$api.request.getSkuInfoIsNull({
						skuId: item.skuId
					},res => {
						if(res.code == 200){
							// 如果该商品不存在
							if(res.data == false){
								that.$api.request.addShopCart({
									quantity: 1,
									shopId: item.shopId,
									productSpuId: item.spuId,
									productSkuId: item.skuId,
									price: item.price,
									productPic: item.skuDefaultImg,
									productName: item.skuName,
									productSubTitle: item.skuSubtitle,
									productCategoryId: item.catalogId,
									productBrand: item.brandName
								}, res => {
									// this.$u.toast("添加成功");
									// 刷新购物车数量和总金额
									that.refreshData()
									that.getCartNumAndMoney()
								})
							}else {
								that.$api.request.setShopSize({
									id: res.data.id,
									num: 1,
								}, res => {
									if(res.code == 200){
										console.log(res);
										that.refreshData()
										that.getCartNumAndMoney()
									}
									
								})
							}
						}
					})
				}
			},
			
			/* 点击前往购物车页面 */
			goCartPage(){
				uni.switchTab({
					url: '/pages/sys/shopCart/index'
				})
			},
			
			/* 获取购物车数量和总金额 */
			getCartNumAndMoney(){
				this.$api.request.getCartNumAndMoney({},res => {
					console.log(res);
					if(res.code == 200){
						if(res.data != null){
							this.cartData = res.data
							this.autoWidth =  res.data.number == 0?'90rpx':'auto'
						}else{
							this.cartData = {
								number: 0,
								money: 0
							}
							this.autoWidth = '90rpx'
						}
					}
				})
			},
			
			/** 跳转 */
			goShopInfoPage(item) {
				uni.navigateTo({
					url: '/pages/sys/home/product?id=' + item.skuId
				})
			},
			change(index) {
				this.current = index;
				let sortValue = index
				// 添加排序结果
				const that = this
				// 调取接口获取数据
				if(this.currentId == 0){
					that.$api.request.getClassIdBySkuInfo({
						classId: this.nextData.id,
						sqType: 0,
						sortValue: sortValue,
						wechatId: uni.getStorageSync('openId')
					}, res => {
						if(res.code == 200){
							that.list = res.data
							that.dataNull = res.data.length > 0?false:true
						}
					})
				}else {
					that.$api.request.getChildData({
						classId: that.classId,
						sqType: 0,
						sortValue: sortValue,
						wechatId: uni.getStorageSync('openId')
					},res => {
						if(res.code == 200){
							that.list = res.data
							that.dataNull = res.data.length > 0?false:true
						}
					})
				}
			},
			// 点击搜索
			getSearch() {
				this.$api.request.searchClass({
					spuAddType: 0,
					keyword: this.keyword,
					catalogId: this.catalogId,
					brandId: this.brandId,
					hotWordLables: this.hotWordLables,
					catalogIdList: this.catalogIdList
				}, res => {
					console.log("查询数据");
					this.list = res.data.products
					this.dataNull = res.data.products.length > 0?false:true
					this.currentId = 0
				})
				
			},
			// 清空搜索
			removeSearch(){
				const that = this
				console.log("清空搜索");
				this.isDelShow = false;
				this.keyword = ''
				that.$api.request.getClassIdBySkuInfo({
					classId: this.nextData.id,
					sqType: 0,
					sortValue: 0,
					wechatId: uni.getStorageSync('openId')
				}, res => {
					if(res.code == 200){
						that.list = res.data
						that.dataNull = res.data.length > 0?false:true
						that.currentId = 0
					}
				})
			},
			//一级分类点击
			tabtap(item, index) {
				const that = this
				this.currentId = index;
				// 调取接口获取数据
				if(item.id == 0){
					var str = "";
					for(var i=0;i<that.cateList.length;i++){
						if(that.cateList[i].id!=0){
							str += that.cateList[i].id
						}
						
					}

					const level2Products = uni.getStorageSync('level2Products');
					const lastProducts = level2Products.filter(v=>{
						
						return str.indexOf(v.catalogId)!=-1;
					})
					that.list = lastProducts;
					
					that.dataNull = lastProducts.length > 0?false:true
					console.log(">>>>>>>>>>"+that.dataNull+"============"+that.dataGo)
				}else {
					that.$api.request.getChildData({
						classId: item.id,
						sqType: 0,
						sortValue: this.current,
						wechatId: uni.getStorageSync('openId')
					},res => {
						if(res.code == 200){
							
							that.classId = item.id
							that.list = res.data
							that.dataNull = res.data.length > 0?false:true
						}
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		color: #EAEAE3;
		height: 100%;
		background-color: #F5F5F5 !important;
		background-size: 100% auto !important;
	}

	.content {

		// padding: 24rpx;
		// background: #FFFFFF;
	}

	.guess-like {
		// margin: 32rpx 23rpx 0;
	}

	.goods-list {

		// background-color: #F8F8F8;
		display: flex;
		flex-wrap: wrap;
		// margin: 0 23rpx;
		padding: 20rpx 40rpx;

		.goods-item {
			width: 49%;
			height: 100%;
			display: flex;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 0 10rpx 10rpx;
			flex-direction: column;
			background-color: #FFFFFF;

			&:nth-child(2n+1) {
				margin-right: 2%;
			}

			.sku-img {
				width: 100%;
				height: 100%;
				padding: 10rpx 0;
				min-height: 300rpx;
				border-radius: 20rpx;
			}

			.title {
				color: #000000;
				font-weight: bold;
				font-size: 26rpx;
				line-height: 30rpx;
			}

			.sub-title {
				color: #9B9B9B;
				font-size: 22rpx;
				overflow: hidden;
				margin-top: 10rpx;
				line-height: 26rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.price-box {
				color: #E71E22;
				font-size: 28rpx;
				margin-top: 16rpx;
				line-height: 30rpx;
				font-weight: bold;
			}
		}
	}

	.no-more-tip {
		width: 100%;
		height: 24rpx;
		color: #B7B7B7;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;		
	
		&.active {
			/* color: $base-color; */
			color: #4CA775;
			background: #FFFFFF;
	
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: #4CA775;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}
	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 88.4vh;
		background-color: #fff;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background: #FFFAFA;
	}
	
	.search-lg-box{
		width: 100vw;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		margin-top: 16rpx;
	}
	
	.search-right-body{
		width: calc(100% - 220upx);
		margin-left: 20rpx;
		// margin-top: 20rpx;
	}
	
	.commodity-list-box{
		width: 100%;
		height: 81.7vh;
	    overflow-y: scroll;
		padding-top: 15rpx;
	}
	
	.commodity-body-card{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}
	
	.shop-images-box{
		width: 510rpx;
		height: 510rpx;
		// height: 324rpx;		
	}
	
	.right-body-box{
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
	}
	
	.shop-info-title{
		color: #000000;
		font-weight: bold;
		font-size: 26rpx;
		line-height: 30rpx;
	}
	
	.shop-body-info-text{
		color: #9B9B9B;
		font-size: 22rpx;
		overflow: hidden;
		margin-top: 10rpx;
		line-height: 26rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.price-box-red{
		color: #E71E22;
		font-size: 28rpx;
		margin-top: 16rpx;
		line-height: 30rpx;
		font-weight: bold;
	}
	
	.price-box-red{
		margin-top: 20rpx;
	}
	
	.title-number-box{
		// white-space: nowrap;
		// display: flex;
		// flex-direction: row;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 14rpx;
	}
	
	.sales-volume{
		margin-left: auto;
		margin-right: 20rpx;
		color: #9B9B9B;
		font-size: 22rpx;
		overflow: hidden;
		margin-top: 10rpx;
		line-height: 26rpx;		
		text-overflow: ellipsis;
	}
	
	.money-nember-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.suspension-box{
		// width: 250rpx;
		// width: 90rpx;
		display: flex;
		flex-direction: row;
		height: 90rpx;
		position: fixed;
		bottom: 80rpx;
		left: 50rpx;
		background: #FFFFFF;
		border-radius: 80rpx;
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.1);
		
		.cart-icon {
			width: 60rpx;
			height: 80rpx;
			margin-left: 15rpx;
			position: relative;
			
			.number-red-box{
				width: 30rpx;
				height: 30rpx;
				background: #FA3534;
				color: #FFFFFF;
				position: absolute;
				top: 10rpx;
				right: -5rpx;
				border-radius: 30rpx;
				text-align: center;
				font-size: 22rpx;
				line-height: 30rpx;
				
			}
		}
		
		.cart-number-text {
			width: calc(100% - 90rpx);
			height: 90rpx;
			margin-left: 15rpx;
			margin-right: 10rpx;
			text-align: center;
			color: #FA3534;
			font-size: 28rpx;
			line-height: 80rpx;
			border-left: 2rpx solid #e7e6e4;
		}
	}
	.search-box-title{
		width: 100vw;
		padding-top: 32rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 15px 15px;
	}
	
	.inputp {
		width: auto;
		margin: 0 24rpx;
		border: 1px solid #4CA775;
		border-radius: 36rpx;
		
		.inputs {
			background: #F2F2F2;
			border-radius: 36rpx;
			position: relative;
	        display: flex;
			align-items: center;
			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 12%, #F5F6F7 100%) !important;
			
			.scaninput {
				width: 500rpx;
				height: 60rpx;
				padding-left: 10rpx;
				display: flex;
				align-items: center;
				color: #000000;
				//background-color: #007AFF;
			}
	
			.searchimg {
				width: 1em;
				height: 1em;
				position: absolute;
				//top: 25upx;
				left: 20upx;
			}
	
			.scanimg {
				width: 1em;
				height: 1em;
				position: absolute;
				//top: 25upx;
				right: 36rpx;
			}
	
			.searchbtn {
				position: absolute;
				//right: 20upx;
				//top: 15upx;
				// border-radius: 5upx;
				//margin-right: -250rpx;
				background-color: rgba(76, 167, 117, 1);
				color: #fff;
				width: 4em;
				line-height: 2em;
				text-align: center;
				font-size: 0.8em;
				
			}
			.scan_weizhi{
				display: flex;
				justify-content: flex-end;
				height: 65rpx;
				position: relative;
				right: -6rpx;
				.scan_btn{
					width: 140rpx;
					height: 68rpx;
					color: #FFF;
					background: linear-gradient(145deg, #33CA7C 0%, #48EB9C 100%);
					border-radius: 40rpx;
					display:flex;
					flex-direction:row;    
					align-items: center;
					justify-content:center;
					margin-right: -2rpx;
					margin-top: -2rpx;
				}
			}
			
		}
	}
	
</style>
